<template>
  <div>
    <button>Friday</button>
    <div>
      姓名：
      <div>{{ user.username }}</div>
      生日：
      <div v-text="user.birthday"></div>
      性别：
      <div v-text="user.male"></div>
      年龄：
      <div v-text="age"></div>
      <input
        type="button"
        @click="go()"
        :value="user.username"
        :title="user.birthday"
      />
    </div>
    <div style="background-color: rgba(48, 216, 58, 0.6)">
      <el-button v-for="(e) in fruit" :key="e">{{ e }}</el-button>
<!--      <el-button v-for="(e, i) in fruit" :key="i">{{ e }}</el-button>-->
    </div>
    <div style="background-color: rgba(216, 52, 37, 0.6)">
      性别：
      <div v-text="user.male"></div>
      性别：
      <div v-if="user.male">男</div>
      <div v-else>女</div>
      性别：
      <div>{{ sex }}</div>
    </div>
    <div style="background-color: rgba(54, 146, 216, 0.6)">
      练习 当点击一个操控按钮时候，某标签组添加一个小标签
      <br />
      <div>
        <el-tag v-for="(e, i) in tags" :key="i">{{ e }}</el-tag>
      </div>
      <br />
      <input v-model="inputValue"/>
      <el-button type="success" @click="add">添加</el-button>
      <el-button type="warning" @click="reset">重置</el-button>
    </div>
  </div>
</template>
<script>
// import New from './components/New.vue';
export default {
  name: "Friday",
  components: {
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      user: {
        username: "zhangsan",
        birthday: "2010-05-12T18:30:50",
        male: false,
      },
      fruit: ["apple", "pear", "banana"],
      tags: ["bbb", "ccc"],
      tagsForReset:null,
      inputValue:"",
    };
  },
  computed: {
    age() {
      let now = new Date().getFullYear();
      let birth = new Date(this.user.birthday).getFullYear();
      console.log(now);
      console.log(birth);
      return now - birth;
    },
    sex() {
      return this.user.male ? "男" : "女";
    },
    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  beforeCreate(){

  },
  created() {

  },
  beforeMount(){

  },
  mounted() {
    this.tagsForReset=JSON.parse(JSON.stringify(this.tags));
    console.log("nice",this.tagsForReset)
  },
  methods: {
    sampleM() {},
    go() {

      this.user.birthday = "1990-05-12T18:30:50";
    },
    add() {
      this.tags.push(this.inputValue);
      console.log(this.tags);
    },
    reset(){
      console.log(this.tagsForReset);
      this.tags=JSON.parse(JSON.stringify(this.tagsForReset));
    }
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped></style>
